<!DOCTYPE HTML>
<html lang="zh-cn">
	<head>
		<title>表格</title>
		<meta charset="utf-8">
	</head>
	<script type="text/javascript">
		window.onload=function (){
			var oTab=document.getElementById('Tab');
			var oTxt1=document.getElementById('txt1');
			var oTxt2=document.getElementById('txt2');
			var aRows=oTab.tBodies[0].rows;
			var backColor="";
			var rLength=aRows.length;
			var oBtn1=document.getElementById('btn1');
			var oBtn2=document.getElementById('btn2');
			var oBtn3=document.getElementById('btn3');
			oBtn3.onclick=function(){
				
				 var arr=[];
				
				 for(var i=0;i<rLength;i++)
				 {
				 	arr[i]=aRows[i];
				 }
				 arr.sort(function(tr1,tr2)
				 {
				 	var n1=parseInt(tr1.cells[2].innerHTML);
				 	var n2=parseInt(tr2.cells[2].innerHTML);
				 	return n1-n2;

				 })
				 alert(arr.length);
				 for(var j=0;j<arr.length;j++)
				 {
				 	
				 	oTab.tBodies[0].appendChild(arr[j]);
				 	alert(arr[j].cells[2].innerHTML);
				 }
			}
			oBtn1.onclick=function(){//搜索
				for(var i=0;i<rLength;i++)
				{
					var str1=oTxt1.value;
					var str2=aRows[i].cells[1].innerHTML;
					var arr=str1.split(' ');
					for(var j=0;j<rLength;j++)
					{
						aRows[i].style.background=backColor;
					}
					//不分大小写搜索
					/*if(str1.toLowerCase()==str2.toLowerCase())
					{
						
						aRows[i].style.background="red";
					}*/
					//用部分内容实现模糊搜索
					/*
					if(str2.toLowerCase().search(str1.toLowerCase())!=-1)
					{
						backColor=this.style.background;
						aRows[i].style.background="red";
					}*/
					//用多关键词搜索
					for(var k=0;k<arr.length;k++)
					{
					if(str2.toLowerCase().search(arr[k].toLowerCase())!=-1)
					{
						backColor=this.style.background;
						aRows[i].style.background="red";
					}
					}


					
				}
			}
			oBtn2.onclick=function(){//删除
				var oTr=document.createElement('tr');
				var oTd=document.createElement('td');
				oTd.innerHTML=++rLength;
					oTr.appendChild(oTd);
				var oTd=document.createElement('td');
				oTd.innerHTML=oTxt1.value;
					oTr.appendChild(oTd);
				var oTd=document.createElement('td');
				oTd.innerHTML=oTxt2.value;
					oTr.appendChild(oTd);
					var oTd=document.createElement('td');
				oTd.innerHTML='<a href="javascript:;">删除</a>';
					oTr.appendChild(oTd);
					oTd.getElementsByTagName('a')[0].onclick=function(
				){
						oTab.tBodies[0].removeChild(this.parentNode.parentNode);
					}
					oTab.tBodies[0].appendChild(oTr);
			}
			

			for(var i=0;i<aRows.length;i++)
			{	//鼠标移入移出
				aRows[i].onmouseover=function(){
					backColor=this.style.background;
					this.style.background="yellow";
				}
				aRows[i].onmouseout=function(){
					this.style.background=backColor;
				}
			}
			for(var i=0;i<aRows.length;i++)
			{//隔行变色
				if(i%2)
				{
					aRows[i].style.background="#ccc";
				}
			}
		}
	</script>
	<body>
	<form>
		姓名：<input type="text" name="姓名" id="txt1"/>
		年龄：<input type="text" name="年龄" id="txt2"/>
		<input type="button" name="搜索" value="搜索" id="btn1"/>
		<input type="button" name="增添" value="增添" id="btn2"/>
		<input type="button" name="排序" value="排序" id="btn3">
	</form>
		<table id="Tab" border="1" style="border-collapse:collapse; width:300px;">
			<thead>
				<tr>
					<td id="number">编号</td>
					<td id="name">姓名</td>
					<td id="age">年龄</td>
					<td id="oreat">操作</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>5</td>
					<td><a href="javascript:;">删除</a></td>
				</tr>
				<tr>
					<td>2</td>
					<td>maria</td>
					<td>27</td>
					<td><a href="javascript:;">删除</a></td>
				</tr>
				<tr>
					<td>3</td>
					<td>李四</td>
					<td>30</td>
					<td><a href="javascript:;">删除</a></td>
				</tr>
				<tr>
					<td>4</td>
					<td>张丰</td>
					<td>60</td>
					<td><a href="javascript:;">删除</a></td>
				</tr>
				<tr>
					<td>5</td>
					<td>王四</td>
					<td>10</td>
					<td><a href="javascript:;">删除</a></td>
				</tr>
				<tr>
					<td>6</td>
					<td>王小珍</td>
					<td>18</td>
					<td><a href="javascript:;">删除</a></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>